﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style/jquery.ui.all.css" />
    <link rel="stylesheet" href="style/demos.css" />
    <script src="js/jquery-1.8.0.js"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
    <style type="text/css">
        .column
        {
            width: 320px;
            float: left;
            padding-bottom: 100px;
        }
        .wrap
        {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
        }
        .portlet
        {
            margin: 0 1em 1em 0;
        }
        .portlet-header
        {
            margin: 0.3em;
            padding-bottom: 4px;
            padding-left: 0.2em;
        }
        .portlet-header .ui-icon
        {
            float: right;
        }
        .portlet-content
        {
            padding: 0.4em;
        }
        .ui-sortable-placeholder
        {
            border: 1px dotted black;
            visibility: visible !important;
            height: 50px !important;
        }
        .ui-sortable-placeholder *
        {
            visibility: hidden;
        }
        .toolbar
        {
            border: 1px solid gray;
            padding:8px;
            text-align:center;
        }
        
        .toolbar a
        {
            background-color: #cccccc;
            border: 2px solid #cccccc;
            color: black;
            height: 20px;
            padding: 2px;
            text-align: center;
            text-decoration: none;
            width: 120px;
            font-size: larger;
            padding-right:10px;
        }
        .toolbar a:hover
        {
            background-color: #cccccc;
            border-bottom: 1px outset #cccccc;
            border-left: 1px outset #cccccc;
            border-top: 1px outset #cccccc;
            height: 20px;
            padding: 2px;
            text-align: center;
            text-decoration: none;
            width: 120px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".column").sortable({
                connectWith: ".column"
            });

            $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
			.find(".portlet-header")
				.addClass("ui-widget-header ui-corner-all")
				.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find(".portlet-content");

            $(".portlet-header .ui-icon").click(function () {
                $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
                $(this).parents(".portlet:first").find(".portlet-content").toggle();
            });

            $(".column").disableSelection();
        });
	</script>
    <title>jQuery UI Sortable - Portlets</title>
</head>
<body>
    <div class="wrap">
        <div class="toolbar">
            <p>
                <a href="AddPortlet.htm">添加</a>
                 <a href="AddPortlet.htm">添加</a>
            </p>
        </div>
        <!-- End demo-description -->
        <div class="demo">
            <div class="column">
                <div class="portlet">
                    <div class="portlet-header">
                        Feeds</div>
                    <div class="portlet-content">
                        <iframe src="http://www.baidu.com/"></iframe>
                    </div>
                </div>
                <div class="portlet">
                    <div class="portlet-header">
                        News</div>
                    <div class="portlet-content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                </div>
            </div>
            <div class="column">
                <div class="portlet">
                    <div class="portlet-header">
                        Shopping</div>
                    <div class="portlet-content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                </div>
            </div>
            <div class="column">
                <div class="portlet">
                    <div class="portlet-header">
                        Links</div>
                    <div class="portlet-content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                </div>
                <div class="portlet">
                    <div class="portlet-header">
                        Images</div>
                    <div class="portlet-content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                </div>
            </div>
        </div>
    </div>
    <!-- End demo -->
</body>
</html>
